/*
 * @Author: zhangzhen
 * @Date: 2022-12-30 09:12:30
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-02-16 10:48:17
 *
 */
import React, {FC, useState, useRef} from 'react';
import FormDesign, {FormDesignRefType} from './FormDesign';
import {Button, message} from 'antd';
import { useLocation ,useNavigate} from 'react-router-dom';
const UseForm: FC<any> = () => {
    const {state} = useLocation()
    const {fieldList,layout:layoutInfo} =state||{}
    const FormDesignRef = useRef<FormDesignRefType>(null);
    const navigate = useNavigate()

    const onFinish = (values:any)=>{
        console.log('values: ', values);

    }
    return (
        <div style={{width:"90%"}}>
            <div
                style={{
                    zIndex: 3,
                    position: 'absolute',
                    padding: 5,
                    top: 0,
                    right: 10,
                    display: 'flex',
                    justifyContent: 'space-between',
                    background: 'rgba(0,0,0,0.7)',
                }}>
                <Button
                    onClick={() => {
                        navigate("/formDesign",{state:{...state}})
                    }}>
                    FormPage
                </Button>
             
            </div>
            <FormDesign
                ref={FormDesignRef}
                isEdit={true}
                defaultValue={fieldList||[]}
                defaultLayout={layoutInfo||{}}
                onlyShowForm={true}
                onSubmit={(values)=>{
                    onFinish(values)
                }}
                
            />
           <div style={{width:"100%",display:"flex",justifyContent:"center"}}>
           <Button style={{marginRight:"10px"}} type='primary' onClick={()=>{
                if(FormDesignRef.current) {
                    const formRef = FormDesignRef.current.getFormRef()
                    formRef.submit()
                }
            }}>提交</Button>
             <Button type='primary' onClick={()=>{
                if(FormDesignRef.current) {
                    const formRef = FormDesignRef.current.getFormRef()
                    formRef.resetFields()
                }
            }}>重置</Button>

           </div>
        </div>
    );
};

export default UseForm;
